在 Next.js 中，
getStaticProps、getStaticPaths 和 getServerSideProps
是用來處理頁面數據獲取的三個不同方法。

先來說一下概念：

再來說方法，

它們分別針對不同的場景進行數據加載。讓我們逐一解釋它們的作用和區別：

1. getStaticProps (靜態生成)什麼時候使用？
   當您的頁面內容在構建時可以確定，不需要每次訪問時重新獲取數據。
   適合用於靜態頁面，如博客文章、產品展示頁面，這些頁面內容不會頻繁變化。
   特點：
   在構建時（build time）運行，因此頁面會被靜態生成。
   生成的靜態頁面在每次用戶請求時直接提供，不需要額外的服務器端渲染。
   適合 SEO，因為頁面在構建時已經完成渲染。

import React from 'react';

const Posts = ({ posts }) => (
  <div>
    <h1>Posts</h1>
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  </div>
);
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts }, // 傳遞到頁面的 props
  };
}

2. getStaticPaths (動態路由的靜態生成)什麼時候使用？
   通常和 getStaticProps 搭配使用，當有動態路徑時（如 /blog/[id]）需要提前告訴 Next.js 構建哪些動態頁面。適用於多個動態路由的靜態頁面生成，例如多篇博客文章、產品詳情頁面等。
   特點：
   定義應該為哪些動態路徑生成靜態頁面。只生成特定路徑的靜態頁面。
   範例：

import React from 'react';

const Post = ({ post }) => (
  <div>
    <h1>{post.title}</h1>
    <p>{post.content}</p>
  </div>
);
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

在這裡，我們為每個 post.id 生成一個對應的靜態頁面。

3. getServerSideProps (服務器端渲染)什麼時候使用？
   當頁面需要每次訪問時都進行數據加載，因為數據可能頻繁更新。
   適合用於需要即時數據的頁面，如電子商務網站的商品庫存頁面、用戶個人信息頁面、社交媒體動態等。
   特點：
   在每次請求時運行，而不是在構建時，這意味著頁面在服務器上每次請求時都會重新渲染。
   適合用於需要實時數據的頁面，但會帶來更高的服務器負擔和加載時間。
   範例：

// pages/dashboard.js
import React from 'react';

const Dashboard = ({ data }) => (
  <div>
    <h1>Dashboard</h1>
    <p>{data.info}</p>
  </div>
);
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 傳遞到頁面的 props
  };
}

概念 vs. 方法

SSG (Static Site Generation):

概念：在構建時生成靜態頁面，適合內容更新不頻繁的網站。
執行方法：使用 getStaticProps 和 getStaticPaths。
getStaticProps 用於在構建時獲取數據並生成靜態頁面。
getStaticPaths 用於定義動態路徑，以便靜態生成這些路徑的頁面。

SSR (Server-Side Rendering):

概念：每次用戶請求頁面時，伺服器生成頁面，適合需要實時數據的應用。
執行方法：使用 getServerSideProps。
getServerSideProps 用於在每次請求時獲取數據並生成頁面，確保用戶獲取的是最新的數據。

ISR (Incremental Static Regeneration):

概念：在構建時生成靜態頁面，並允許根據時間定期更新靜態內容。
執行方法：使用 getStaticProps，但加上 revalidate 屬性。
getStaticProps 用於初始生成靜態頁面，而 revalidate 參數指定了多久後頁面會被重新生成，以獲取最新數據。

總結

SSG、SSR 和 ISR 是三種不同的渲染方法，根據應用需求的不同選擇使用。
getStaticProps、getStaticPaths 和 getServerSideProps 是 Next.js 提供的函數，用於具體實現這些概念的渲染方法。它們決定了如何獲取數據以及何時生成頁面。